<title>添加管理员</title>
<form class="layui-form" action="" method="post" lay-filter="LAY-system-admin-form-add">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input"
                   lay-verify="required|username">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="password" id="LAY-system-admin-add-password" placeholder="请输入密码"
                   autocomplete="off"
                   class="layui-input" lay-verify="required|password">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-inline">
            <input type="password" id="LAY-system-admin-add-rePassword" name="pwd" placeholder="请输入密码"
                   autocomplete="off"
                   class="layui-input"
                   lay-verify="required|password">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-inline">
            <input type="text" name="name" placeholder="请输入名称" autocomplete="off" class="layui-input"
                   lay-verify="required" maxlength="50">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-inline">
            <input type="text" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input"
                   lay-verify="required|email">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" placeholder="请输入手机号" autocomplete="off" class="layui-input"
                   lay-verify="required|phone">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-inline">
            <script type="text/html" template lay-url="/admin/options?role" lay-done="layui.data.done(d);">
                {{#
                    layui.each(d.result, function(index, item){
                }}
                    <input type="checkbox" class="role-box" title="{{ item.name }}" value="{{item.id}}">
                {{#
                    });
                }}
            </script>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">设置</label>
        <div class="layui-input-inline">
            <input type="checkbox" name="enabled" lay-skin="switch" lay-text="可用|禁用" checked="" value="true">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="LAY-system-admin-save">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>

</form>

<script>
    layui.use(['admin', 'form'], function () {
        var $ = layui.$
            , admin = layui.admin
            , setter = layui.setter
            , layer = layui.layer
            , response = setter.response
            , form = layui.form;

        form.render(null, 'LAY-system-admin-form-add');

        //自定义验证规则
        form.verify({
            username: function (value) {
                var reg = /^[0-9a-z_A-Z]+$/;
                if (!reg.test(value)) {
                    return '用户名只能由字母或者数字组成';
                }
                if (value.length < 5) {
                    return '用户名最少5个字符';
                }
                if (value.length > 20) {
                    return '用户名最多20个字符';
                }
                var exist = true;
                admin.req({
                    url: "/admin/users/validate/"+value,
                    traditional: true,
                    async: false,
                    success: function (result) {
                        exist = result.exist;
                    },
                    error: function (err) {
                        console.error(err);
                        return;
                    }
                });
                if (exist) {
                    return '此用户名已存在';
                }
            },
            password: function (value) {
                var reg = /^[^\s&\"<>]+$/;
                if (!reg.test(value)) {
                    return '密码必须是数字或者字母！';
                }
                if (value.length < 6) {
                    return '密码最少6个字符';
                }
                if (value.length > 20) {
                    return '密码最多20个字符';
                }
                var pass = $("#LAY-system-admin-add-password").val();
                if (value !== pass) {
                    return '两次输入的密码不一致！';
                }
                var repass = $("#LAY-system-admin-add-rePassword").val();
                if (value !== repass) {
                    return '两次输入的密码不一致！';
                }
            },
            email: function(value) {
                var reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
                if (!reg.test(value)) {
                    return '邮箱格式不正确';
                }

            },
            phone:function (value) {
                var reg = /^1[3|5|7|9|8]\d{9}$/
                if (!reg.test(value)) {
                    return '手机格式不正确';
                }
            }
        });

        form.on('submit(LAY-system-admin-save)', function (data) {
            var ids = []
            $(data.form).find(".role-box:checked").each(function(){
                ids.push($(this).val())
            })
            if(!ids.length){
                layer.msg('至少选择', {
                    icon: 2
                });
                return;
            }
            data.field.roleIds = ids.join(",");
            admin.req({
                url: '/admin/users'
                , type: 'POST'
                , data: data.field
                , success: function (res) {
                    var statusCode = response.statusCode;
                    if (res[response.statusName] == statusCode.ok) {
                        layer.closeAll('page');  //关闭page的弹框
                        layer.msg('添加成功', {
                            icon: 1
                        });
                    }
                }
            });
            return false;
        });
    });

    layui.data.done = function (d) {
        layui.use(['form'], function () {
            var form = layui.form;
            form.render(null, 'LAY-system-admin-form-add'); //渲染该模板下的动态表单
        });
    };
</script>
